import React, { Component } from 'react';

// 从antd 组件库中 只引入一个Button
import { Button,Tooltip,Typography } from 'antd';
// 图标
import {
    SearchOutlined,
    ArrowUpOutlined,
    PoweroffOutlined,
} from '@ant-design/icons';

const { Title, Paragraph, Text, Link } = Typography;

class View extends Component {
    constructor(props){
        super(props);
        this.state = {
            bTip:{
                search:'这是要输入的内容'
            },
            loadings: [],
        }
    }
    enterLoading(index) {
        this.setState(({ loadings }) => {
            const newLoadings = [...loadings];
            newLoadings[index] = true;
            return {
                loadings: newLoadings,
            };
        });
        setTimeout(() => {
            this.setState(({ loadings }) => {
                const newLoadings = [...loadings];
                newLoadings[index] = false;
                return {
                    loadings: newLoadings,
                };
            });
        }, 6000);
    }
    render(){
        return(
            <React.Fragment>
                <div className="m">
                    <h3>antd</h3>
                    <div className="button">
                        <Button type="primary">登录</Button>
                        <Button type="link">查看更多</Button>
                        <Tooltip title={this.state.bTip.search}>
                            <Button shape="circle" icon={<SearchOutlined />} />
                        </Tooltip>
                        <Tooltip title={this.state.bTip.search}>
                            <Button shape="circle" icon={<ArrowUpOutlined />} />
                        </Tooltip>
                        <Button
                          type="primary"
                          icon={<PoweroffOutlined />}
                          loading={this.state.loadings[1]}
                          onClick={() => this.enterLoading(1)}
                        >
                          Click me!
                        </Button>
                    </div>
                    <Typography>
                        <Title level={2}>这是要讲的排版的内容</Title>
                        <Paragraph>有人没有复习有人没有复习有人没有复习有人没有复习有人没有复习有人没有复习有人没有复习有人没有复习有人没有复习有人没有复习</Paragraph>
                        <Paragraph>有人没有复习有人没有复习有人没有复习有人没有复习有人没有复习有人没有复习有人没有复习有人没有复习有人没有复习有人没有复习</Paragraph>
                        <Paragraph>有人没有复习有人没有复习有人没有复习有人没有复习有人没有复习有人没有复习有人没有复习有人没有复习有人没有复习有人没有复习</Paragraph>
                        <Text strong>这是什么strong标签</Text>
                        <Text>这是什么em标签</Text>
                        <Text>这是什么b标签</Text>
                    </Typography>



                </div>
            </React.Fragment>
        )
    }
}

export default View;
